<template>
	<view class="goods_detail">
		<!-- swiper -->
		<swiper :autoplay="true" :circular="true" :indicator-dots="true">
			<swiper-item v-for="(item, index) in goodsObj.pics" :key="index" @click="handlePrevewImage(item.pics_mid)">
				<image :src="item.pics_mid" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- price -->
		<view class="goods_price">{{ goodsObj.goods_price }}</view>
		<view class="goods_name_wrap">
			<view class="goods_name">{{ goodsObj.goods_name }}</view>
			<view class="goods_collect" @click="onTapCollect">
				<view :class="isCollect ? 'iconfont icon-shoucang' : 'iconfont icon-shoucang1'"></view>
				<view class="collect_text">收藏</view>
			</view>
		</view>
		<!-- info -->
		<view class="goods_info">
			<view class="goods_info_title">图文详情</view>
			<view class="goods_info_content">
				<rich-text :nodes="goodsObj.goods_introduce"></rich-text>
			</view>
		</view>
		<!-- bottom tool -->
		<view class="btm_tool">
			<view class="tool_item">
				<view class="iconfont icon-kefu"></view>
				<view>联系客服</view>
				<button open-type="contact"></button>
			</view>
			<view class="tool_item">
				<view class="iconfont icon-fen_xiang"></view>
				<view>分享</view>
				<button open-type="share"></button>
			</view>

			<navigator open-type="switchTab" class="tool_item cartBox" url="/pages/cart/index">
				<view class="iconfont icon-cart-Empty"></view>
				<view>购物车</view>
				<view class="cartCount" v-show="cartCount > 0">{{this.cartCount}}</view>
				<!-- 加购动画 -->
				<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
					<view class="ball" v-show="isShow"></view>
				</transition>
			</navigator>

			<view class="tool_item btn_cart" @click="handleCartAdd">
				<view>加入购物车</view>
			</view>
			<view class="tool_item btn_buy">
				<view>立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request,
		showToast
	} from '@/utils/tools';

	export default {
		data() {
			return {
				goodsObj: {},
				collectList: [],
				isCollect: false,
				cartCount: 0,
				isShow: false
			};
		},
		thisGoodsInfo: {},
		methods: {
			// 请求当前id商品详情
			async getGoodsDetail(goods_id) {
				console.log('detail页面请求', goods_id);
				let {
					data: res
				} = await request({
					url: 'goods/detail',
					data: {
						goods_id
					}
				});
				console.log(res);
				const goodsObj = res.message;
				this.thisGoodsInfo = res.message;
				console.log('thisGoodsInfo', this.thisGoodsInfo);
				// 设置轮播图数据,价格,名字,详情,商品id
				this.goodsObj = {
					pics: goodsObj.pics,
					goods_price: goodsObj.goods_price,
					goods_name: goodsObj.goods_name,
					goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
					goods_id: goodsObj.goods_id
				};
				let cart = uni.getStorageSync('cart') || [];
				console.log('购物车数量', cart.length)
				this.cartCount = cart.length
				// 获取收藏列表
				let collectList = uni.getStorageSync('collectList') || [];
				// .some数组中有一个满足则返回true
				this.isCollect = collectList.some(v => v.goods_id === this.goodsObj.goods_id);
			},
			// 轮播图预览大图
			handlePrevewImage(pics_mid) {
				// 构建数组,map不改变元数据
				const urls = this.goodsObj.pics.map(v => v.pics_mid);
				const current = pics_mid;
				uni.previewImage({
					current: current, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},
			// 加入购物车
			handleCartAdd() {
				console.log('点击了加入购物车');
				// 动画
				this.isShow = !this.isShow
				// 1 读取缓存 --数组
				let cart = uni.getStorageSync('cart') || [];
				// 2 查找索引,收否有该id商品
				let index = cart.findIndex(v => v.goods_id === this.thisGoodsInfo.goods_id);
				if (index === -1) {
					// 如果不存在索引
					this.thisGoodsInfo.num = 1; // 则创建num属性
					this.thisGoodsInfo.check = true; // 则创建选中状态
					cart.push(this.thisGoodsInfo);
				} else {
					// 存在
					cart[index].num++;
				}
				// 更新购物车
				console.log('购物车数量', cart.length)
				this.cartCount = cart.length
				uni.setStorageSync('cart', cart); // 写入缓存
				// 消息提醒
				// uni.showToast({
				// 	title: '加入成功',
				// 	icon: 'success',
				// 	mask: "true"
				// });
			},
			// 点击收藏
			async onTapCollect() {
				console.log('点击了收藏');
				// 初始化
				let isCollect = false;
				let collectList = uni.getStorageSync('collectList') || [];
				console.log(collectList);
				// 获取当前收藏商品id
				let index = collectList.findIndex(v => v.goods_id === this.thisGoodsInfo.goods_id);
				// 如果index为-1,表示没有对应id
				if (index !== -1) {
					// 有就删除--取消收藏
					collectList.splice(index, 1);
					isCollect = false;
					uni.showToast({
						title: '取消成功',
						icon: 'success',
						mask: "true",
						success: result => {},
						fail: () => {}
					});
				} else {
					// 没有就增加--收藏
					collectList.push(this.thisGoodsInfo);
					isCollect = true;
					uni.showToast({
						title: '收藏成功',
						icon: 'success',
						mask: "true",
						success: result => {},
						fail: () => {}
					});
				}
				// 写入缓存
				uni.setStorageSync('collectList', collectList);
				this.isCollect = isCollect
			},
			// 开始动画之前，也就是起始状态
			beforeEnter(el) {
				console.log('-----------------beforeEnter')
				// console.log(this.goodsObj.pics[0].pics_mid)
				var imageURL = this.goodsObj.pics[0].pics_mid
				el.style.background = 'url(' + imageURL + ')'
				el.style.backgroundSize = '100% 100%'
				el.style.transform = 'scale(5,5) translateY(-50px)'
				el.style.opacity = 1
				el.style.transition = 'all 0.5s ease 0.5s'
				// console.log(el.style.background)
			},
			// 动画指定的过程
			enter(el, done) {
				console.log('-----enter');
				// 作用：告诉浏览器重绘或重排页面结构
				// offsetWidth 会通知浏览器重新计算元素的宽度，这样，会造成浏览器重绘
				el.offsetWidth
				// 设置动画要达到的目标状态
				el.style.transform = 'scale(1,1)'
				el.style.opacity = 1
				done()
			},
			afterEnter(el) {
				// 动画结束
				console.log('------------after');
				this.isShow = !this.isShow
			}
		},
		onLoad(options) {
			console.log('detail-onLoad');
			if (options.goods_id) {
				console.log('详情页接收的goods_id', options);
				const {
					goods_id
				} = options;
				this.getGoodsDetail(goods_id);
			} else {
				this.getGoodsDetail(57442);
			}
		},
		onShow() {
			// console.log('onshow');
		}
	};
</script>

<style lang="less" scope>
	.goods_detail {
		swiper {
			width: 100vw;
			height: 40vh;
			text-align: center;
			// background-color: red;

			swiper-item {
				width: 100%;

				image {
					width: 70%;
				}
			}
		}
	}

	.goods_price {
		padding: 15rpx;
		font-size: 32rpx;
		color: var(--themeColor);
		font-weight: 600;
	}

	.goods_name_wrap {
		display: flex;
		border-top: 5rpx solid #dedede;
		border-bottom: 5rpx solid #dedede;
		// 上下
		padding: 10px 0;

		.goods_name {
			flex: 5;
			font-size: 30rpx;
			color: #000;
			// 左右
			padding: 0 10px;

			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.goods_collect {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 1rpx solid #dedede;

			.icon-shoucang {
				color: orangered;
			}
		}
	}

	.goods_info {
		padding-bottom: 86rpx;

		.goods_info_title {
			padding: 20rpx;
			font-size: 32rpx;
			color: var(--themeColor);
			font-weight: 600;
		}

		.goods_info_content {
			color: var(--themeColor);
		}
	}

	// 底部工具
	.btm_tool {
		border: 1rpx solid #ccc;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height: 90rpx;
		display: flex;

		// 每一项
		.tool_item {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			position: relative;

			button {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}

		// 购物车显示
		.cartBox {
			position: relative;

			.iconfont {
				// transform: rotate(15deg);
			}

			.cartCount {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: red;
				text-align: center;
				line-height: 30rpx;
				color: #fff;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
			}

			.ball {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				// background-color: red;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				z-index: 1;
			}
		}

		// 购物车
		.btn_cart {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			background-color: #ffa500;
			color: #fff;
		}

		// 立即购买
		.btn_buy {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			background-color: #eb4450;
			color: #fff;
		}
	}
</style>
